<template>
  <div class="group-wrapper">
    <div class="group-content" v-for="(group,index) in groupList" :key="group[3]">
      <div class="group-header">
        <div class="group-header-title">{{groupTitle[index][1]}}</div>
        <div class="group-header-operation" @click="handleGroupMore(groupTitle[index])">更多
          <span class="iconfont">&#xe84e;</span>
        </div>
      </div>
      <div class="group-movie" v-for="item in group" :key="item.id">
        <movie :groupMovie="item"></movie>
      </div>
    </div>
  </div>
</template>

<script>
import Movie from './Movie'
export default {
  name: 'MoviesGroup',
  props: {
    groupList: Array,
    groupTitle: Array
  },
  components: {
    Movie
  },
  methods: {
    handleGroupMore (listType) {
      this.$router.push({path: '/movie-more', query: {listType: listType[0]}})
      this.$store.dispatch('changeTab', listType[1])
      this.showHeadBack()
    },
    showHeadBack () {
      this.$store.dispatch('showHeadBack', 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variable'
  .group-wrapper
    width: 100%
    border-top: 1px solid #ccc
    margin-bottom: 44px
    background-color: $color-background-shallow
    .group-content
      border-top: 1px solid #ccc
      border-bottom: 1px solid #ccc
      margin-bottom: .2rem
      background-color: #fff
      .group-header
        height: .8rem
        display: flex
        align-items: center
        flex-direction: row
        justify-content: space-between
        color: #666
        margin: 0 .25rem
        .group-header-title
          font-size: .35rem
        .group-header-operation
          font-size: .3rem
      .group-movie
        display: inline-block
</style>
